<template>
	<a-modal :width="500" :visible="visible" title="添加台词" @ok="handleOk" @cancel="handleClose" centered>
		<a-input show-count :maxlength="64" placeholder="如 门店终于上团购了 现在下单只要99..." style="width: 100%;"
			v-model:value="cardObj.content" />
		<div style="margin-top: 20px; display: flex; align-items: center;">
			<a-switch v-model:checked="cardObj.scene_synchronous" />
			<span style="margin-left: 10px;">同时生成音频素材</span>
		</div>

		<template #footer>
			<a-button @click="handleClose" type="default">取消</a-button>
			<a-button :loading="submitLoading" @click="handleOk" type="primary" style="margin-left: 10px;">确定</a-button>
		</template>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
		FolderAddOutlined,
		MinusOutlined,
		PlusOutlined
	} from "@ant-design/icons-vue";
	import request from "../../../../../../common/utils/request";

	import store from "../../../../../../store";

	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			linesDetail: {
				type: Object,
				default: ()=> {return {}}
			}
		},

		components: {
			
		},

		setup(props, context) {
			const state = reactive({
				cardObj: {
					content: '',
					scene_synchronous: true
				},
				submitLoading: false
			});

			const clipJSON = computed(() => store.state.shotstack.clipJSON);
			const handleOk = () => {
				let obj = {}
				state.submitLoading = true
				Object.assign(obj, state.cardObj)
				obj.index = props.linesDetail?.index
				obj.lines_index = props.linesDetail?.lines_index
				if(state.cardObj.scene_synchronous){
					request.post('/work_ai', '/user/shotstack/text-to-audio', {
						content: state.cardObj.content,
						volume: 0,
						speed: 1,
						// voice_type: 'https://cloud.tencent.com/document/product/1073/92668',
						voice_type: clipJSON.value.script_data.audio_config.voice_type,
						emotion_category: 'neutral',
						emotion_intensity: 100
					}).then(res=> {
						state.submitLoading = false
						Object.assign(obj, res.result)
						obj.audio_url = obj.url
						obj.duration = obj.durationf
						obj.conver_to_audio = state.cardObj.scene_synchronous?'on':'off'
						context.emit('close', obj)
					}).catch(err=>{
						state.submitLoading = false
					})
				} else {
					state.submitLoading = false
					context.emit('close', obj)
				}
			}

			const handleClose = () => {
				context.emit('close')
			}

			watch(() => props.visible, val => {
				state.cardObj.scene_synchronous = true
				if(props.linesDetail){
					state.cardObj.content = props.linesDetail?.content
				}
			})

			return {
				...toRefs(state),
				clipJSON,
				handleOk,
				handleClose,
			}
		},
	});
</script>

<style lang="less" scoped>
</style>